<template>
    <div class="container-group-statistics">
        <Browser v-loading="loading" :basic-info="basicInfo" @select-column="onSelectColumn"></Browser>
        <select-colunm-dialog
            v-model="selectColumnVisable"
            v-bind="selectColumnProps"
            :placement="'left-end'"
            :is-min-length="true"
            @submit="onSubmit"
            @cancel="onSubmit">
            <template #description>
                <component :is="componentId"></component>
            </template>
        </select-colunm-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import Browser from '../browse/browse.vue';
import BrowseTootipDesc from '../browse/browse-tootip-desc.vue';
import SelectColunmDialog from '@/components/zw/select-colunm-dialog/select-colunm-dialog.vue';
import { getStaticsPromotion } from '@/api/ecommerce/storeManage';
import { CUSTOM_LIST_TYPE } from '@/const/ecommerce';

import lodash from 'lodash';

const loading = ref(false);

// 数据概览
const basicInfo = ref([]);

// 查询参数

const searchParams = ref({
    data_range: ''
});

// 获取数据概览数据
const getData = async params => {
    try {
        searchParams.value = params;
        loading.value = true;
        const res = await getStaticsPromotion({ ...params, ...searchParams.value });
        basicInfo.value = res;
        loading.value = false;
    } catch (error) {
        basicInfo.value = [];
        loading.value = false;
        throw new Error(error);
    }
};

/* ----------------------------自定义选择列-start---------------------------- */
const selectColumnVisable = ref(false);

/** 描述的组件 */
const componentId = ref(BrowseTootipDesc);

/** 二次处理弹窗的内容 */
const handleFormatData = async column => {
    const res = await getStaticsPromotion({ data_range: 'all', ...searchParams.value });
    const columnMap = {};
    column.forEach(item => {
        columnMap[item.field_key] = item;
    });

    res.forEach(item => {
        Object.assign(columnMap[item.field_key], item);
    });
    return column;
};

/** 选择列的props参数 */
const selectColumnProps = reactive({
    type: CUSTOM_LIST_TYPE.DATA_OVERVIEW.type,
    length: 6,
    title: '数据概览',
    placement: 'left-end',
    formatData: handleFormatData
});
/**
 * 打开数据概览配置列
 */
const onSelectColumn = () => {
    Object.assign(selectColumnProps, {
        type: CUSTOM_LIST_TYPE.DATA_OVERVIEW.type,
        length: 6,
        title: '数据概览'
    });
    componentId.value = BrowseTootipDesc;
    selectColumnVisable.value = true;
};

const onSubmit = () => {
    selectColumnVisable.value = false;
    getData(searchParams.value);
};
/* ----------------------------自定义选择列-end---------------------------- */

// 暴露公共属性
defineExpose({
    getData
});
</script>
